<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="shortcut icon" href="images/employees.png">
<!-- <link rel="stylesheet"
	href="<%=request.getContextPath()%>/css/header-styles.css">

<link rel="stylesheet"
	href="<%=request.getContextPath()%>/css/jquery/jquery-ui-1.8.22.custom.css">
<link rel="stylesheet" href="jquery-ui.css">
<script type="text/javascript" src="js/security/securityAsserts.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
 -->
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/jquery/css/skins/jquery-ui-1.8.17.custom.css"
	type="text/css" media="all" />
<script type='text/javascript'
	src='<%=request.getContextPath()%>/jquery/version/calendar_us.js'></script>
<script type='text/javascript'
	src='<%=request.getContextPath()%>/jquery/version/jquery-v1.7.1.js'></script>
<script type='text/javascript'
	src='<%=request.getContextPath()%>/jquery/version/jquery.form.js'></script>
<script type='text/javascript'
	src='<%=request.getContextPath()%>/jquery/version/jquery-ui-1.8.17.custom.min.js'></script>
<script type='text/javascript'
	src='<%=request.getContextPath()%>/jquery/version/twitter-bootstrap.min.js'></script>
<script type='text/javascript'
	src='<%=request.getContextPath()%>/jquery/jquery-ui.min.js'></script>


<script language="javascript">
	$j1 = jQuery.noConflict();
	function showMemoPopUpDetails(url, type, wt, ht,user) {
				if (wt == undefined) {
			wt = 700;
		}
		if (ht == undefined) {
			ht = 450;
		}
		$j1("#modalContent").empty();

		$j1("#modalbox").dialog({
			open : function(event, ui) {				
				 $j1('.ui-dialog-titlebar-close').addClass('ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only');
				 $j1('.ui-dialog-titlebar-close').append('<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text" style="background-color:red; height:4px;" title="Close" >close</span>');
				},
			width : wt,
			height : ht,
			title : type,
			modal : true,
			resizable : false,
			draggable : false,
			closeOnEscape : false,
			title : 'Individual Employee Report Details: <font color=blue>'+user+"</font>",
				closeText: "Close",
		});
		$j1("#modalContent")
				.html(
						'<center>Please Wait... <img src="images/green-bar.GIF" alt="Wait" /> </center>');
		//alert('loading...please wait:'+url);
		$j1("#modalContent").load(url, function(response, status, xhr) {
			// alert(response); this response will be recieved from the server
			//  alert(status); //this status will be recieved from the server	
			$j1("#modalbox").dialog("open");
		});

		/* same as above
		$j1("#modalContent").load(url, loadURLDATA);
		function loadURLDATA() {
			$j1("#modalbox").dialog("open");
		  }*/
	}
</script>

</head>
<body>

	<jsp:include page="menuHeader.jsp"></jsp:include>
	<div id="msgid"></div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	&nbsp;&nbsp;&nbsp;
	<i><a onmouseover="this.style.cursor='wait'">${actionPage}</a></i><br><br>
	<table border="3" align="center">
		<tr>
			<th>Employee number</th>
			<th>Employee name</th>
			<th>Action</th>
		</tr>
		<c:forEach items="${employeeReportAllEntity}" var="employee">
			<tr>
				<td>${employee.eno}</td>
				<td>${employee.ename}</td>
				<td><a href="#"
					onClick="showMemoPopUpDetails('https://localhost:8445<%=request.getContextPath()%>/employeReportView.cgi?singleView=${employee.eno}','', 700,200,'${employee.ename}')">View Details</a></td>
			</tr>
		</c:forEach>
	</table>
	<div id="modalbox" style="display: none;">
		<div id="modalContent"></div>
	</div>

	<div id='loader'></div>
	<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>